<template>
  <div class="codeBox">
    <div class="header">
      <svg-icon class="merchant" icon-class="erweima" width="16px" height="16px"></svg-icon>
      <span>入驻二维码</span>
    </div>
    <div class="title">
      扫一扫快速入驻
    </div>
    <div class="box">
      <i class="border-left"></i>
      <i class="border-top"></i>
      <i class="border-right"></i>
      <i class="border-bottom"></i>
      <img :src="code">
    </div>
    <div class="footer">长按此图保存二维码</div>
  </div>
</template>

<script>
import { qrCode } from '@/api/salesman'

export default {
  name: 'qrCode',
  data() {
    return {
      code: ''
    }
  },
  created() {
    qrCode().then(res => {
      if (res.data.errorCode === 0) {
        this.code = res.data.result.qrcode
      } else {
        this.$weui.alert(res.data.errorMsg)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '../../styles/index.scss';
  .codeBox {
    width: px2rem(640px);
    min-height: px2rem(660px);
    background:rgba(255,255,255,1);
    border-radius: 5px;
    box-shadow:0px 0px px2rem(15px) rgba(188,188,188,0.4);
    padding: px2rem(30px);
    margin: 0 auto;
    margin-top: px2rem(70px);
    .header {
      border-bottom: 1px solid #C9C9C9;
      span {
        color: #2E495C;
      }
      svg {
        fill: #2E495C;
      }
    }
    .title {
      text-align: center;
      padding: px2rem(34px) 0 px2rem(30px) 0;
      color: #444;
    }
    .box {
      $border: 4px solid #2e495c;
      width: px2rem(400px);
      height: px2rem(400px);
      position: relative;
      margin: 0 auto;
      .border-left, .border-right, .border-top, .border-bottom {
        width: px2rem(60px);
        height: px2rem(60px);
        display: inline-block;
      }
      .border-left {
        border-left: $border;
        border-top: $border;
        position: absolute;
        top: 0;
        left: 0;
      }
      .border-top {
        border-right: $border;
        border-top: $border;
        position: absolute;
        top: 0;
        right: 0;
      }
      .border-right {
        border-right: $border;
        border-bottom: $border;
        position: absolute;
        bottom: 0;
        right: 0;
      }
      .border-bottom {
        border-bottom: $border;
        border-left: $border;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      img {
        width: px2rem(360px);
        height: px2rem(360px);
        padding: px2rem(20px);
      }
    }
    .footer {
      text-align: center;
      padding-top: px2rem(38px);
      color: #444;
    }
  }
</style>

